<template>
  <div class="page-container">
    <app-head></app-head>
    <app-body>
      <el-row>
        <!-- 左侧分类菜单 -->
        <el-col :span="4" class="sidebar">
          <div class="sidebar-header">
            <h3>商品分类</h3>
          </div>
          <el-menu
            default-active="0"
            class="el-menu-vertical-demo"
            @select="handleMenuSelect"
          >
            <!-- “全部” 分类，通过 Popover 实现悬停弹出 -->
            <el-menu-item index="0" class="popover-menu-item">
              <el-popover trigger="hover" placement="right" width="220">
                <!-- 弹出框内放置一个垂直菜单 -->
                <el-menu class="submenu-menu" default-active="0" @select="handleMenuSelect">
                  
                  <el-menu-item index="002">全部 - 新品上架</el-menu-item>
                </el-menu>
                <div slot="reference" class="popover-reference">全部</div>
              </el-popover>
            </el-menu-item>
            <!-- “数码” 分类 -->
            <el-menu-item index="1" class="popover-menu-item">
              <el-popover trigger="hover" placement="right" width="220">
                <el-menu class="submenu-menu" default-active="0" @select="handleMenuSelect">
                  <el-menu-item index="101">手机</el-menu-item>
                  <el-menu-item index="102">平板电脑</el-menu-item>
                  <el-menu-item index="103">笔记本电脑</el-menu-item>
                  <el-menu-item index="104">相机</el-menu-item>
                  <el-menu-item index="105">数码配件</el-menu-item>
                  <el-menu-item index="106">智能设备</el-menu-item>
                  <el-menu-item index="107">办公设备</el-menu-item>
                  <el-menu-item index="108">网络设备</el-menu-item>
                  <el-menu-item index="109">影音数码</el-menu-item>
                </el-menu>
                <div slot="reference" class="popover-reference">数码</div>
              </el-popover>
            </el-menu-item>
            <!-- 服饰分类 -->
            <el-menu-item index="2" class="popover-menu-item">
              <el-popover trigger="hover" placement="right" width="220">
                <el-menu class="submenu-menu" default-active="0" @select="handleMenuSelect">
                  <el-menu-item index="201">女装</el-menu-item>
                  <el-menu-item index="202">女鞋</el-menu-item>
                  <el-menu-item index="203">男装</el-menu-item>
                  <el-menu-item index="204">男鞋</el-menu-item>
                  <el-menu-item index="205">箱包手表</el-menu-item>
                  <el-menu-item index="206">首饰配件</el-menu-item>
                  <el-menu-item index="207">运动服饰</el-menu-item>
                  <el-menu-item index="208">收拾配件</el-menu-item>
                </el-menu>
                <div slot="reference" class="popover-reference">服饰</div>
              </el-popover>
            </el-menu-item>
            <!-- 技能服务分类 -->
            <el-menu-item index="3" class="popover-menu-item">
              <el-popover trigger="hover" placement="right" width="220">
                <el-menu class="submenu-menu" default-active="0" @select="handleMenuSelect">
                  <el-menu-item index="301">定制设计</el-menu-item>
                  <el-menu-item index="302">技能学习</el-menu-item>
                  <el-menu-item index="303">餐饮美食</el-menu-item>
                </el-menu>
                <div slot="reference" class="popover-reference">技能</div>
              </el-popover>
            </el-menu-item>
            <!--服务分类-->
            <el-menu-item index="4" class="popover-menu-item">
              <el-popover trigger="hover" placement="right" width="220">
                <el-menu class="submenu-menu" default-active="0" @select="handleMenuSelect">
                  <el-menu-item index="401">跑腿服务</el-menu-item>                
                  <el-menu-item index="402">上门回收</el-menu-item>
                </el-menu>
                <div slot="reference" class="popover-reference">服务</div>
              </el-popover>
            </el-menu-item>
            <!--  美妆/玩具分类 -->
            <el-menu-item index="5" class="popover-menu-item">
              <el-popover trigger="hover" placement="right" width="220">
                <el-menu class="submenu-menu" default-active="0" @select="handleMenuSelect">
                  <el-menu-item index="501">彩妆</el-menu-item>
                  <el-menu-item index="502">护肤</el-menu-item>
                  <el-menu-item index="503">香水</el-menu-item>
                </el-menu>
                <div slot="reference" class="popover-reference">美妆</div>
              </el-popover>
            </el-menu-item>
           <!--  美妆/玩具分类 -->
            <el-menu-item index="6" class="popover-menu-item">
              <el-popover trigger="hover" placement="right" width="220">
                <el-menu class="submenu-menu" default-active="0" @select="handleMenuSelect">
                  <el-menu-item index="601">玩具</el-menu-item>
                  <el-menu-item index="602">手办</el-menu-item>
                </el-menu>
                <div slot="reference" class="popover-reference">玩具</div>
              </el-popover>
            </el-menu-item>
             <!--  食品分类 -->
             <el-menu-item index="7" class="popover-menu-item">
              <el-popover trigger="hover" placement="right" width="220">
                <el-menu class="submenu-menu" default-active="0" @select="handleMenuSelect">
                  <el-menu-item index="701">粮油米面</el-menu-item>
                  <el-menu-item index="702">酒水</el-menu-item>
                  <el-menu-item index="703">休闲食品</el-menu-item>
                  <el-menu-item index="704">饮料</el-menu-item>
                  <el-menu-item index="705">水果</el-menu-item>
                  <el-menu-item index="706">茶</el-menu-item>
                </el-menu>
                <div slot="reference" class="popover-reference">食品</div>
              </el-popover>
            </el-menu-item>
             <!--  图书分类 -->
             <el-menu-item index="8" class="popover-menu-item">
              <el-popover trigger="hover" placement="right" width="220">
                <el-menu class="submenu-menu" default-active="0" @select="handleMenuSelect">
                  <el-menu-item index="801">图书期刊</el-menu-item>
                  <el-menu-item index="802">文化用品</el-menu-item>
                  <el-menu-item index="803">游戏类</el-menu-item>
                  <el-menu-item index="804">游戏交易</el-menu-item>
                  <el-menu-item index="805">音像CD</el-menu-item>
                </el-menu>
                <div slot="reference" class="popover-reference">图书</div>
              </el-popover>
            </el-menu-item>
            <!--  其他分类 -->
            <el-menu-item index="9" class="popover-menu-item">
              <el-popover trigger="hover" placement="right" width="220">
                <el-menu class="submenu-menu" default-active="0" @select="handleMenuSelect">
                  <el-menu-item index="901">其他用品</el-menu-item>
                </el-menu>
                <div slot="reference" class="popover-reference">其他</div>
              </el-popover>
            </el-menu-item>
          </el-menu>
        </el-col>
        
         <!-- 右侧主要内容区域 -->
         <el-col :span="20" class="main-content">
          <!-- 轮播图区域 -->
          <div class="carousel-container">
            <el-carousel height="300px" :interval="4000" arrow="always">
              <el-carousel-item v-for="(item, index) in hotItems" :key="index">
                <div class="carousel-item" @click="toDetails(item)">
                  <el-image class="carousel-image" :src="item.imgUrl" fit="cover">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline">无图</i>
                    </div>
                  </el-image>
                  <div class="carousel-info">
                    <h3>{{ item.idleName }}</h3>
                    <div class="price-tag">{{ item.idlePrice }}￥</div>
                    <div class="user-info">
                      <el-avatar :size="30" :src="item.user.avatar"></el-avatar>
                      <span>{{ item.user.nickname }}</span>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>

          <!-- 价格筛选区域 -->
          <div class="price-filter-container">
            <div class="price-filter">
              <el-input v-model="minPrice" placeholder="最低价" type="text" class="price-input"></el-input>
              <span class="price-divider">-</span>
              <el-input v-model="maxPrice" placeholder="最高价" type="text" class="price-input"></el-input>
              <el-button type="primary" @click="findIdleItem(1)" class="filter-btn">确定</el-button>
              <div class="sort-options">
                                          <el-radio-group 
                            v-model="priceSortOrder" 
                            size="medium" 
                            @change="(val) => {
                              this.$router.replace({ 
                                query: { 
                                  ...this.$route.query, 
                                  sort: val,
                                  page: 1 // 排序变化时重置到第一页
                                }
                              });
                              this.loadItems(1);
                            }">
                            <el-radio-button label="">默认排序</el-radio-button>
                            <el-radio-button label="asc">价格从低到高</el-radio-button>
                            <el-radio-button label="desc">价格从高到低</el-radio-button>
                          </el-radio-group>
              </div>
            </div>
          </div>

          <!-- 商品列表 -->
          <div class="content">
            <div class="section-title">
              <h2>精选好物</h2>
              <div class="divider"></div>
            </div>
            
            <div class="idle-list">
              <!-- 骨架屏 -->
              <el-row v-if="loading" :gutter="30">
                <el-col :span="6" v-for="i in 8" :key="'skeleton-'+i">
                  <div class="idle-card skeleton">
                    <div class="idle-image skeleton"></div>
                    <div class="idle-content">
                      <div class="idle-header">
                        <div class="idle-title skeleton" style="width: 70%; height: 20px;"></div>
                      </div>
                      <div class="idle-details">
                        <div class="idle-price skeleton" style="width: 40%; height: 16px;"></div>
                      </div>
                      <div class="user-info">
                        <div class="user-avatar skeleton"></div>
                        <div class="user-nickname skeleton" style="width: 50%; height: 14px;"></div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              
              <!-- 实际内容 -->
              <el-row v-else :gutter="30">
                <el-col :span="6" v-for="(idle, index) in idleList" :key="index">
                  <div class="idle-card" @click="toDetails(idle)">
                    <el-image class="idle-image" :src="idle.imgUrl" fit="cover">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline">无图</i>
                      </div>
                    </el-image>
                    <div class="idle-content">
                      <div class="idle-header">
                        <div class="idle-title">{{ idle.idleName }}</div>
                        <div class="idle-condition">{{ idle.idleCondition }}</div>
                      </div>
                      <el-row class="idle-details">
                        <el-col :span="12">
                          <div class="idle-price">{{ idle.idlePrice }}￥</div>
                        </el-col>
                        <el-col :span="20">
                          <div class="idle-place">{{ idle.idlePlace }}</div>
                        </el-col>
                      </el-row>
                      <div class="user-info">
                        <el-image class="user-avatar" :src="idle.user.avatar" fit="cover">
                          <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline">无图</i>
                          </div>
                        </el-image>
                        <div class="user-nickname">{{ idle.user.nickname }}</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            
            <div class="pagination">
              <el-pagination background @current-change="handleCurrentChange"
                             :current-page.sync="currentPage"
                             :page-size="8"
                             layout="prev, pager, next, jumper"
                             :total="totalItem">
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </app-body>
    
    <!-- 返回顶部按钮 -->
    <el-backtop :right="50" :bottom="50">
      <div class="back-to-top">
        <i class="el-icon-caret-top"></i>
      </div>
    </el-backtop>
  </div>


</template>

  
  <script>
  import AppHead from '../common/AppHeader.vue';
  import AppBody from '../common/AppPageBody.vue';
  import AppFoot from '../common/AppFoot.vue';

  
  export default {
    name: "index",
    components: {
      AppHead,
      AppBody,
      AppFoot
    },
    data() {
      return {
        loading: true,
        showBackTop: false,
        labelName: '0',
        labelDetailsName:'0',
        idleList: [],
        currentPage: 1,
        hotItems: [], // 新增热门商品数据
        totalItem: 1,
        priceSortOrder: '',
        minPrice: '',
        maxPrice: ''
      };
    },
    created() {
 // 从URL初始化所有状态
 this.priceSortOrder = this.$route.query.sort || '';
  this.labelName = this.$route.query.labelName || '0';
  this.currentPage = parseInt(this.$route.query.page) || 1;
  
  // 统一加载数据
  this.loadItems(this.currentPage);
  this.fetchHotItems();
  
  window.addEventListener('scroll', this.handleScroll);
},

watch: {
  $route(to) {
    // 当路由变化时同步状态
    this.priceSortOrder = to.query.sort || '';
    this.labelName = to.query.labelName || '0';
    this.currentPage = parseInt(to.query.page) || 1;
    // 触发数据加载
    this.loadItems(this.currentPage);
  }
},
    methods: {
       // 统一的数据加载方法
  loadItems(page = 1) {
    if (this.priceSortOrder) {
      this.IdleItemSortByPrice(page);
    } else {
      this.findIdleItem(page);
    }
  },
       // 新增获取热门商品方法
    // 修改 fetchHotItems 方法
      fetchHotItems() {
        this.$api.findIdleItemByHot({
          page: 1,
          nums: 4,
        }).then(res => {
          let list = res.data.list;
          for (let i = 0; i < list.length; i++) {
            list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
            let pictureList = JSON.parse(list[i].pictureList);
            list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
          }
          this.hotItems = list;
        }).catch(e => {
          console.log("获取热门商品失败，当前信息为:",this.idleList);
          // 失败时使用普通商品作为回退
          this.hotItems = this.idleList.slice(0, 4);
        });
      },
              // 价格排序方法
          IdleItemSortByPrice(page = 1) {
            this.loading = true;
            this.priceSortOrder = this.$route.query.sort || '';
            // 合并所有筛选条件
            const params = {
              page: page,
              nums: 8,
              sort: this.priceSortOrder,
            };

            this.$api.IdleItemSortByPrice(params).then(res => {
              let list = res.data.list;
              for (let i = 0; i < list.length; i++) {
                list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + 
                                list[i].releaseTime.substring(11, 19);
                let pictureList = JSON.parse(list[i].pictureList);
                list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
              }
              
              // 更新主商品列表
              this.idleList = list;
              this.totalItem = res.data.count; // 更新总条数
              this.currentPage = page; // 更新当前页码
              
            }).catch(e => {
              console.error('排序失败:', e);
              this.$message.error('排序加载失败');
            }).finally(() => {
              this.loading = false;
            });
          },
      findIdleItem(page = 1) {
        this.loading = true;
        const loading = this.$loading({
          lock: true,
          text: '正在为您加载...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.2)'
        });
        let apiCall;
        if (this.minPrice !== '' && this.maxPrice !== '' && (this.labelName > 0)) {
          apiCall = this.$api.findIdleItemByMix({
            minPrice: this.minPrice,
            maxPrice: this.maxPrice,
            idleLabel: this.labelName,
            page: page,
            nums: 8
          });
        } else if (this.minPrice !== '' && this.maxPrice !== '') {
          apiCall = this.$api.findIdleItemByPrice({
            minPrice: this.minPrice,
            maxPrice: this.maxPrice,
            page: page,
            nums: 8
          });
        } else if (this.labelName > 0) {
          apiCall = this.$api.findIdleItemByLabel({
            idleLabel: this.labelName,
            page: page,
            nums: 8
          });
        } else {
          apiCall = this.$api.findIdleItem({
            page: page,
            nums: 8
          });
        }
        apiCall.then(res => {
          let list = res.data.list;
          for (let i = 0; i < list.length; i++) {
            list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
            let pictureList = JSON.parse(list[i].pictureList);
            list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
          }
          this.idleList = list;
          this.totalItem = res.data.count;
        }).catch(e => {
          console.log(e);
          this.$message.error('数据加载失败，请稍后重试');
        }).finally(() => {
          loading.close();
          this.loading = false;
        });
      },
      // 分类选择
  handleMenuSelect(index) {
    this.labelName = index;
    this.$router.replace({ 
      query: { 
        page: 1, 
        labelName: this.labelName,
        sort: this.priceSortOrder // 保持排序参数
      } 
    });
    this.loadItems(1);
  },

  // 分页变化
  handleCurrentChange(val) {
    this.$router.replace({ 
      query: { 
        page: val, 
        sort: this.priceSortOrder,
        labelName: this.labelName
      } 
    });
    this.loadItems(val);
  },
      toDetails(idle) {
        this.$router.push({ path: '/details', query: { id: idle.id } });
      },
      handleScroll() {
        // 控制返回顶部按钮显示
        this.showBackTop = window.pageYOffset > 300;
      }
    }
  };
  </script>
  

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

/* 全局样式 */
:root {
  --xy-primary: #ff5500; /* 闲鱼橙 */
  --xy-hover: #ff7733;
  --xy-bg: #f8f8f8;
  --xy-text: #333;
  --xy-light-text: #666;
  --xy-lighter-text: #999;
  --xy-border: #eee;
  --xy-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 页面容器和全局动画 */
.page-container {
  position: relative;
  min-height: 100vh;
  opacity: 0;
  transform: translateY(20px);
  animation: pageEnter 0.6s ease-out forwards;
  background-color: #f5f5f5;
  font-family: 'Noto Sans SC', 'Roboto', sans-serif;
}

@keyframes pageEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 侧边栏样式优化 */
.sidebar {
  background: white;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  height: calc(100vh - 60px);
  padding: 0;
  position: sticky;
  top: 60px;
  z-index: 10;
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--xy-border);
  background: white;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--xy-text);
  font-weight: 600;
}

.el-menu-vertical-demo {
  width: 100%;
  height: calc(100% - 57px);
  overflow-y: auto;
  background: white;
  padding: 12px 0;
  border-right: none;
}

.el-menu-item {
  font-size: 15px;
  color: var(--xy-text);
  margin: 4px 12px;
  border-radius: 6px;
  height: 44px;
  line-height: 44px;
  transition: all 0.3s;
}

.el-menu-item:hover {
  background: rgba(255,85,0,0.1);
  color: var(--xy-primary);
}

.el-menu-item.is-active {
  color: var(--xy-primary);
  background: rgba(255,85,0,0.15);
  font-weight: 500;
}

/* 主要内容区域 */
.main-content {
  padding: 20px;
  min-height: calc(100vh - 60px);
  background-color: #f5f5f5;
}

/* 轮播图样式 */
.carousel-container {
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--xy-card-shadow);
}

.carousel-item {
  position: relative;
  height: 100%;
  cursor: pointer;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
}

.carousel-info h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.price-tag {
  display: inline-block;
  background: var(--xy-primary);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info span {
  margin-left: 8px;
  font-size: 14px;
}

/* 价格筛选区域 */
.price-filter-container {
  margin-bottom: 24px;
}

.price-filter {
  display: flex;
  align-items: center;
  background: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: var(--xy-card-shadow);
}

.price-input {
  width: 120px;
}

.price-input >>> .el-input__inner {
  border-radius: 20px;
  border: 1px solid var(--xy-border);
  height: 36px;
  transition: all 0.3s;
}

.price-input >>> .el-input__inner:focus {
  border-color: var(--xy-primary);
}

.price-divider {
  font-size: 16px;
  margin: 0 12px;
  color: var(--xy-light-text);
}

.filter-btn {
  margin-left: 16px;
  border-radius: 20px;
  padding: 10px 24px;
}

.sort-options {
  margin-left: auto;
}

/* 内容区域 */
.content {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--xy-card-shadow);
}

.section-title {
  margin-bottom: 24px;
  position: relative;
}

.section-title h2 {
  margin: 0;
  font-size: 22px;
  color: var(--xy-text);
  font-weight: 600;
  padding-bottom: 12px;
}

.divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--xy-primary);
}

/* 商品卡片样式优化 */
.idle-list {
  margin: 0;
}
/* 确保图片容器可见 */
.image-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f5f5;
  color: var(--xy-light-text);
}
.idle-card {
  min-height: 360px;
  opacity: 1; /* 确保动画不影响显示 */
  height: 360px;
  display: flex;
  animation: cardEnter 0.6s ease-out forwards;
  flex-direction: column;
  border: 1px solid var(--xy-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 20px;
  position: relative;
}

.card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--xy-primary);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
  z-index: 2;
}

.idle-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(255,85,0,0.15);
}

.idle-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  position: relative;
  transition: all 0.3s;
}

.idle-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: white;
}

.idle-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.idle-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--xy-text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 42px;
  line-height: 1.4;
}

.idle-condition {
  margin-left: 8px;
  font-size: 12px;
  color: var(--xy-lighter-text);
  white-space: nowrap;
}

.idle-details {
  margin-top: auto;
}

.idle-price {
  font-size: 18px;
  color: var(--xy-primary);
  font-weight: bold;
}

.idle-place {
  font-size: 12px;
  color: var(--xy-light-text);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-top: 1px dashed var(--xy-border);
  margin-top: 8px;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.user-nickname {
  font-size: 12px;
  color: var(--xy-light-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  padding: 30px 0 10px;
  margin-top: 20px;
}

.pagination >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--xy-primary);
  color: white;
}

.pagination >>> .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: var(--xy-primary);
}

/* 返回顶部按钮 */
.back-to-top {
  background-color: var(--xy-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 12px 0 rgba(255,85,0,0.2);
  transition: all 0.3s;
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px 0 rgba(255,85,0,0.3);
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .el-col-6 {
    width: 33.33%;
  }
}

@media screen and (max-width: 992px) {
  .sidebar {
    display: none;
  }
  
  .main-content {
    width: 100%;
  }
  
  .price-filter {
    flex-wrap: wrap;
  }
  
  .sort-options {
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .el-col-6 {
    width: 50%;
  }
  
  .carousel-info h3 {
    font-size: 18px;
  }
  
  .price-tag {
    font-size: 16px;
  }
}

@media screen and (max-width: 576px) {
  .el-col-6 {
    width: 100%;
  }
  
  .main-content {
    padding: 10px;
  }
  
  .content {
    padding: 16px;
  }
  
  .price-filter {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .price-divider {
    margin: 8px 0;
  }
  
  .filter-btn {
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
  }
}
</style>
  